<template>
  <el-container>
    <!-- 头 -->
    <myHeader></myHeader>
    <el-main>
      <div class="frosted__glass">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span
              style="
                position: absolute;
                margin-top: -64px;
                margin-left: -63px;
                font-size: 22px;
                font-weight: 600;
              "
              >租房信息确认</span
            >
            <!-- <el-button style="float: right; padding: 3px 0" type="text"
              >操作按钮</el-button
            > -->
          </div>
          <div class="text item">
            <div class="form">
              <el-form
                ref="form"
                :label-position="labelPosition"
                :model="form"
                :rules="rules"
                label-width="80px"
              >
                <el-col :span="8">
                  <el-form-item label="城市">
                    <el-input
                      :disabled="true"
                      v-model="houseinfo.city"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="16">
                  <el-form-item label="详细地址">
                    <el-input
                      :disabled="true"
                      v-model="houseinfo.houseSite"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-form-item></el-form-item>

                <el-col :span="8">
                  <el-form-item label="卧室">
                    <el-input
                      :disabled="true"
                      v-model="houseinfo.bedroom"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="客厅">
                    <el-input
                      :disabled="true"
                      v-model="houseinfo.living"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="厨房">
                    <el-input
                      :disabled="true"
                      v-model="houseinfo.kichen"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-form-item></el-form-item>
                <el-col :span="8">
                  <el-form-item label="卫生间">
                    <el-input
                      :disabled="true"
                      v-model="houseinfo.toilet"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="电梯">
                    <el-input
                      :disabled="true"
                      :value="houseinfo.elevator == 0 ? '无' : '有'"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="面积">
                    <el-input :disabled="true" v-model="houseinfo.area"
                      ><span
                        slot="suffix"
                        style="margin-right: 6px; font-size: 15px; color: gray"
                        >平方米</span
                      ></el-input
                    >
                  </el-form-item>
                </el-col>
                <el-form-item></el-form-item>

                <el-col :span="8">
                  <el-form-item label="租赁方式">
                    <el-input
                      :disabled="true"
                      :value="houseinfo.type == 0 ? '整租' : '合租'"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="租金">
                    <el-input :disabled="true" v-model="houseinfo.money"
                      ><span
                        slot="suffix"
                        style="margin-right: 6px; font-size: 15px; color: gray"
                        >元/月</span
                      ></el-input
                    >
                  </el-form-item>
                </el-col>
                <el-form-item></el-form-item>

                <el-col :span="8">
                  <el-form-item label="姓名">
                    <el-input
                      :disabled="true"
                      v-model="masterinfo.nikeName"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-form-item></el-form-item>

                <el-col :span="12">
                  <el-form-item label="账号">
                    <el-input
                      :disabled="true"
                      v-model="masterinfo.userName"
                    ></el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item label="手机号">
                    <el-input
                      :disabled="true"
                      v-model="masterinfo.phone"
                    ></el-input>
                  </el-form-item>
                </el-col>

                <el-form-item></el-form-item>
                <el-col :span="12">
                  <el-form-item label="开始时间" prop="startTime">
                    <el-date-picker
                      type="date"
                      placeholder="选择日期"
                      v-model="rentinfo.startTime"
                      style="width: 100%"
                    ></el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="结束时间">
                    <el-date-picker
                      type="date"
                      placeholder="选择日期"
                      v-model="rentinfo.endTime"
                      style="width: 100%"
                    ></el-date-picker>
                  </el-form-item>
                </el-col>

                <el-form-item label="备注" class="rentcontent">
                  <el-input
                    type="textarea"
                    placeholder="请输入内容"
                    v-model="rentinfo.note"
                  ></el-input>
                </el-form-item>
                <el-form-item></el-form-item>
                <el-col :span="20">
                  <el-form-item>
                    <el-button @click="goback">取消</el-button>
                    <el-button
                      type="primary"
                      @click="toConfirm"
                      :confirmButtonClass="confirmButton"
                      >确定</el-button
                    >
                  </el-form-item>
                </el-col>
              </el-form>
            </div>
          </div>
        </el-card>
      </div>
    </el-main>
    <el-footer><myFooter style="margin-left: 260px"></myFooter></el-footer>
  </el-container>
</template>


<script>
import myHeader from "../components/myHeader.vue";
import myFooter from "../components/myFooter.vue";
import request from "@/utils/request";
export default {
  components: {
    myHeader,
    myFooter,
  },
  data() {
    return {
      houseId: "",
      dialogVisible: false,
      labelPosition: "right",
      houseinfo: {},
      masterinfo: {
        name: "张三",
        phone: "13866666666",
        useraccount: "66666666",
      },
      rentinfo: {
        ownerId: "",
        rentId: "",
        houseId: "",
        startTime: "",
        endTime: "",
        note: "",
      },
      //获取localStorage中保存的后台返回的用户信息
      user: localStorage.getItem("user")
        ? JSON.parse(localStorage.getItem("user"))
        : {},
    };
  },
  created() {
    this.houseId = this.$route.query.id;
    request.get("/house/" + this.houseId).then((res) => {
      if (res.code === 200) {
        this.houseinfo = res.data;
        request.get("/user/" + this.houseinfo.ownerId).then((res) => {
          if (res.code === 200) {
            this.masterinfo = res.data;
          } else {
            this.$notify.error(res.msg);
          }
        });
      } else {
        this.$notify.error(res.msg);
      }
    });
  },
  methods: {
    //取消，返回上一页
    goback() {
      this.$router.go(-1);
    },

    toConfirm() {
      console.log(this.houseId);
      this.rentinfo.houseId = this.houseId;
      this.rentinfo.ownerId = this.masterinfo.id;
      this.rentinfo.rentId = this.user.id;
      console.log(this.rentinfo);
      request.post("/wanted", this.rentinfo).then((res) => {
        if (res.code === 200) {
          this.$notify.success("求租信息已发送！");
          this.$router.push("/");
        } else {
          this.$notify.error(res.msg);
        }
      });
    },
    onSubmit() {
      console.log("submit!");
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    open() {
      this.$alert(
        "已向房东发送求租信息，待房东同意后即可完成租房，请注意查看个人消息",
        "注意",
        {
          confirmButtonText: "确定",
          confirmButtonClass: "confirmButton",
          callback: (action) => {
            this.$message({
              type: "info",
              message: `action: ${action}`,
            });
          },
        }
      );
    },
    open2() {
      this.$message({
        showClose: true,
        duration: 0,
        message:
          "已向房东发送求租信息，待房东同意后即可完成租房，请注意查看个人消息",
        type: "success",
      });
    },
    openHTML() {
      this.$message({
        showClose: true,
        dangerouslyUseHTMLString: true,
        duration: 0,
        type: "success",
        customClass: "openhtml",
        message:
          "<span>已向房东发送求租信息,</span><strong>请注意查看个人消息</strong>",
      });
    },
  },
};
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.el-header,
.el-footer {
  /* background-color: #b3c0d1; */
  color: #333;
  text-align: center;
  line-height: 60px;
}
.el-main {
  /* background-color: #e9eef3; */
  color: #333;
  text-align: center;
  line-height: 160px;
  background: url("../assets/carousel/house1.jpg") center center no-repeat;
}

/* 卡片样式 */
.el-card__header {
  padding: 18px 20px;
  border-bottom: 1px solid #ebeef5;
  box-sizing: border-box;
  height: 70px;
  width: 480px;
  position: relative;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix {
  height: 30px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
.el-card__body {
  padding: 20px 30px 20px 17px;
}
.box-card {
  width: 600px;
  /* height: 600px; */
  margin-left: 429px;
}
.el-button--primary {
  color: #fff;
  background-color: #1c92d2;
  border-color: #0075b2;
}
/* 卡片样式结束 */
.formBox {
  color: #9399a5;
  margin: 0 auto;
  width: 590px;
  padding-top: 50px;
}
.rentcontent {
  margin-top: 100px;
}
.el-input__suffix {
  margin-right: 6px;
  font-size: 15px;
  color: gray;
}
/* 弹窗 */
.el-dialog {
  width: 607px;
  height: 250px;
}
.el-dialog__body {
  padding: 38px 35px 0px !important;
}
.el-dialog__footer {
  height: 100px;
}

.el-button--primary .confirmButton {
  background-color: #00a988 !important;
  border-color: #007e63 !important;
}
.confirmButton {
  background-color: #00a988 !important;
  border-color: #007e63 !important;
}
</style>